<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

    <!-- 富文本编辑器 -->
    <link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css"/>
    <!--引入bootrtrap文件使用文件上传   注意：css文件一定要在上面-->
    <link rel="stylesheet" href="../js/bootstrap-fileinput/css/fileinput.css">
    <script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
    <!--引入bootrtrap文件使用文件上传   注意：css文件一定要在上面-->
    <script charset="utf-8" src="../js/bootstrap-fileinput/js/fileinput.js"></script>
    <script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>


    <!--引入自定义文件   注意：必须在其他文件的下方  否则执行顺序不生效-->
    <script src="../js/pages/public.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">

<!-- 正文区域 -->
<section class="content">

    <div class="box-body">

        <!--tab页-->
        <div class="nav-tabs-custom">

            <!--tab头-->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">商品基本信息</a>
                </li>
                <li>
                    <a href="#pic_upload" data-toggle="tab">商品图片</a>
                </li>
                <li>
                    <a href="#customAttribute" data-toggle="tab">扩展属性</a>
                </li>
                <li>
                    <a href="#spec" data-toggle="tab">规格</a>
                </li>
            </ul>
            <!--tab头/-->

            <!--tab内容-->
            <div class="tab-content">

                <!--表单内容-->
                <div class="tab-pane active" id="home">
                    <div class="row data-type">
                        <div class="col-md-2 title">商品分类</div>

                        <div class="col-md-10 data">
                            <table>
                                <tr>
                                    <td>
                                        <select id="one" onchange="getTwo(this.value)" class="form-control">
                                        </select>
                                    </td>
                                    <td>
                                        <select id="two" onchange="getThree(this.value)"
                                                class="form-control select-sm"></select>
                                    </td>
                                    <td>
                                        <select id="three" onchange="getBrand(this.value)"
                                                class="form-control select-sm"></select>
                                    </td>
                                    <td>
                                        模板ID:<span id="typeIds"></span>
                                    </td>
                                </tr>
                            </table>

                        </div>


                        <form id="FromIds">
                            <input type="hidden" id="One1" name="category1Id"><!--三级类目-->
                            <input type="hidden" id="Two1" name="category2Id">
                            <input type="hidden" id="Three1" name="category3Id">

                            <input type="hidden" id="typeTemplateId" name="typeTemplateId"><!--分类模板id-->

                            <input type="hidden" id="images1" name="smallPic"><!--图片-->


                            <div class="col-md-2 title">商品名称</div>
                            <div class="col-md-10 data">
                                <input type="text" class="form-control" name="goodsName" placeholder="商品名称" value="">
                            </div>

                            <div class="col-md-2 title">品牌</div>
                            <div class="col-md-10 data">
                                <select id="BrandId" name="brandId" class="form-control"></select>
                            </div>

                            <div class="col-md-2 title">副标题</div>
                            <div class="col-md-10 data">
                                <input type="text" class="form-control" name="caption" placeholder="副标题" value="">
                            </div>

                            <div class="col-md-2 title">价格</div>
                            <div class="col-md-10 data">
                                <div class="input-group">
                                    <span class="input-group-addon">¥</span>
                                    <input type="text" class="form-control" name="price" placeholder="价格" value="">
                                </div>
                            </div>

                            <div class="col-md-2 title editer">商品介绍</div>
                            <div class="col-md-10 data editer">
                                <textarea id="ContentId" name="content"
                                          style="width:800px;height:400px;visibility:hidden;"></textarea>
                            </div>

                            <div class="col-md-2 title rowHeight2x">包装列表</div>
                            <div class="col-md-10 data rowHeight2x">

                                <textarea rows="4" class="form-control" placeholder="包装列表"></textarea>
                            </div>

                            <div class="col-md-2 title rowHeight2x">售后服务</div>
                            <div class="col-md-10 data rowHeight2x">
                                <textarea rows="4" class="form-control" placeholder="售后服务"></textarea>
                            </div>
                        </form>


                    </div>
                </div>

                <!--图片上传-->
                <div class="tab-pane" id="pic_upload">
                    <div class="row data-type">
                        <!-- 颜色图片 -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"
                                    data-toggle="modal"><i class="fa fa-file-o"></i> 新建
                            </button>

                        </div>

                        <table class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>

                                <th class="sorting">颜色</th>
                                <th class="sorting">图片</th>
                                <th class="sorting">操作</th>
                            </thead>
                            <tbody id="images">
                            <!--                            <tr>-->
                            <!--                                <td>-->

                            <!--                                </td>-->
                            <!--                                <td>-->
                            <!--                                    <img alt="" src="" width="100px" height="100px">-->
                            <!--                                </td>-->
                            <!--                                <td>-->
                            <!--                                    <button type="button" class="btn btn-default" title="删除"><i-->
                            <!--                                            class="fa fa-trash-o"></i> 删除-->
                            <!--                                    </button>-->
                            <!--                                </td>-->
                            <!--                            </tr>-->
                            </tbody>
                        </table>

                    </div>
                </div>


                <!--扩展属性-->
                <div class="tab-pane" id="customAttribute">
                    <div class="row data-type" id="cusDivId">
                        <!--                        <div>-->
                        <!--                            <div class="col-md-2 title">扩展属性1</div>-->
                        <!--                            <div class="col-md-10 data">-->
                        <!--                                <input class="form-control" placeholder="扩展属性1">-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                </div>

                <!--规格-->
                <div class="tab-pane" id="spec">
                    <div class="row data-type">
                        <div class="col-md-2 title">是否启用规格</div>
                        <div class="col-md-10 data">
                            <input type="checkbox">
                        </div>
                    </div>
                    <p>

                    <div>

                        <table id="SpecOptionId" class="row data-type">

                            <!--                            <div name="specificationName">-->
                            <!--                                <div class="col-md-2 title">网络制式</div>-->
                            <!--                                <div class="col-md-10 data">-->
                            <!--                                    <span>-->
                            <!--                                        <input type="checkbox">2G-->
                            <!--                                    </span>-->
                            <!--                                    <span>-->
                            <!--                                        <input type="checkbox">3G-->
                            <!--                                    </span>-->
                            <!--                                    <span>-->
                            <!--                                        <input type="checkbox">4G-->
                            <!--                                    </span>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                        </table>


                        <div class="row data-type">
                            <table id="TRID" class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                <tr>
                                    <th class="sorting">屏幕尺寸</th>
                                    <th class="sorting">网络制式</th>
                                    <th class="sorting">价格</th>
                                    <th class="sorting">库存</th>
                                    <th class="sorting">是否启用</th>
                                    <th class="sorting">是否默认</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        4.0
                                    </td>
                                    <td>
                                        3G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                    <!--规格尾巴-->
                </div>
            </div>

        </div>
        <!--tab内容/-->
        <!--表单内容/-->

    </div>


    </div>
    <div class="btn-toolbar list-toolbar">
        <input type="button" onclick="InsertGoodsEdit()" class="btn btn-primary" value="Big保存">
        <button class="btn btn-default">返回列表</button>
    </div>

</section>


<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">上传商品图片</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped">
                    <tr>
                        <td>颜色</td>
                        <td><input class="form-control" id="color" placeholder="颜色"></td>
                    </tr>
                    <tr>
                        <td>商品图片</td>
                        <td>
                            <input type="file" id="multipartFile" name="multipartFile"/>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" onclick="imageOption()" aria-hidden="true">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>


<!-- 正文区域 /-->
<script type="text/javascript">

    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager: true
        });
    });

</script>

</body>
<script th:inline="javascript">
    $(function () {
        getOne();
    })

    //一级联动
    function getOne() {
        $.ajax({
            url: domain + "/itemcat/getItemCatByParentId",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "get",//必须指定请求类型
            data: {parentId: 0},//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    // console.log("一级分类")
                    // console.log(result)
                    var data = result.data;
                    var html = "<option>--请选择--</option>";
                    for (let i = 0; i < data.length; i++) {
                        html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                    }
                    $("#one").html(html)
                    $("#two").html("<option>--请选择--</option>")
                    $("#three").html("<option>--请选择--</option>")
                } else if (result.code == 12) {
                    top.window.location.href = "../shoplogin.html";//token失效 跳转回登录界面  重新登录生成token  放进缓存  重新获取
                }
            }, error: function () {
                alert("分类管理查询失败")
            }
        })
    }

    //二级联动
    function getTwo(parentId2) {
        $.ajax({
            url: domain + "/itemcat/getItemCatByParentId",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "get",//必须指定请求类型
            data: {parentId: parentId2},//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    // console.log("二级分类")
                    // console.log(result)
                    var data = result.data;
                    var html1 = "<option>--请选择--</option>";
                    for (let i = 0; i < data.length; i++) {
                        html1 += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                    }
                    $("#two").html(html1)
                    $("#three").html("<option>--请选择--</option>")
                } else if (result.code == 12) {
                    top.window.location.href = "../shoplogin.html";//token失效 跳转回登录界面  重新登录生成token  放进缓存  重新获取
                }
            }, error: function () {
                alert("分类管理查询失败")
            }
        })
    }

    //三级联动
    function getThree(parentId3) {
        $.ajax({
            url: domain + "/itemcat/getItemCatByParentId",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "get",//必须指定请求类型
            data: {parentId: parentId3},//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    // console.log("三级分类")
                    // console.log(result)
                    var data = result.data;
                    var html2 = "<option>--请选择--</option>";
                    for (let i = 0; i < data.length; i++) {
                        html2 += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                    }
                    $("#three").html(html2)
                } else if (result.code == 12) {
                    top.window.location.href = "../shoplogin.html";//token失效 跳转回登录界面  重新登录生成token  放进缓存  重新获取
                }
            }, error: function () {
                alert("分类管理查询失败")
            }
        })
    }//直接将查询出来  首先父id给0   然后点击查询下级的时候  直接将当前id传过去即可   e.id


    //根据选择之后的id  查询typeid
    function getBrand(id) {
        console.log("三级联动 父id :" + id)
        $.ajax({
            url: domain + "/itemcat/getBrand",
            headers: {"Autherizetion": window.localStorage.getItem("token")},
            // contentType:"application/json;charset=utf-8",
            dataType: "json",
            type: "get",
            data: {id: id},//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    console.log(result)
                    //--------------------------------------(模板ID)------------------------------------------------------------------
                    $("#typeIds").html(result.data.id)
                    var brandIds = JSON.parse(result.data.brandIds);
                    var html = '';
                    $(brandIds).each(function (i, e) {
                        html += '<option value="' + brandIds[i].id + '">' + brandIds[i].text + '</option>';
                    })
                    $("#BrandId").html(html)


                    //-------------------------------------(扩展属性)------------------------------------------------------------------
                    var custom = result.data.customAttributeItems
                    var customjson = JSON.parse(custom)
                    console.log(customjson)
                    var html1 = '';
                    $(customjson).each(function (i, e) {
                        html1 += ' <div>\n' +
                            '                            <div class="col-md-2 title">' + e.text + '</div>\n' +
                            '                            <div class="col-md-10 data">\n' +
                            '                                <input class="form-control" placeholder="' + e.text + '">\n' +
                            '                            </div>\n' +
                            '                        </div>';
                    })
                    $("#cusDivId").html(html1);


                    //-------------------------------------(规格)------------------------------------------------------------------
                    var specList = result.data.specVOSList;
                    var html2 = '';
                    $(specList).each(function (i, e) {
                        html2 += '<tr>'
                        html2 += '  <td class="col-md-2 title">' + e.text + '</td> <td class="col-md-10 data">'
                        $(e.specOptionVOList).each(function (j, k) {
                            // console.log(k)
                            html2 += '  <span>'
                            html2 += ' <input type="checkbox" name="attributeValue" value="' + k.optionName + '" >' + k.optionName + ''
                            html2 += '</span>';
                        })
                        html2 += '  </td></tr>';
                    })
                    $("#SpecOptionId").html(html2)
                } else if (result.code == 12) {
                    top.window.location.href = "../shoplogin.html";//token失效，跳转回去登录页面重新登录
                }
            }
        })
    }

    //--------------------------------------------------------------保存图片-----------------------------------------------------------------------

    //保存图片
    function imageOption() {
        var tr = '<tr>';
        tr += '<td>' + $("#color").val() + '</td>'
        tr += '<td>'
        tr += '    <img alt="" src="' + a + '" width="320px" height="180px">'
        tr += '</td>'
        tr += '<td>'
        tr += '    <button type="button" className="btn btn-default" onclick="delTr(this)" title="删除"><iclassName="fa fa-trash-o" ></i> 删除'
        tr += '   </button>'
        tr += '</td>'
        tr += '</tr>'
        $("#images").append(tr);/*追加一行，问题：格式不同*/
    }

    function delTr(nowTr) {/*删除一行*/
        $(nowTr).parent().parent().remove()
    }


    //注意:使用的时候由于无法携带token的原因，所以直接在网关中放过
    $('#multipartFile').fileinput({
        language: 'zh',
        uploadUrl: domain + '/file/MyFile',
        browseClass: 'btn btn-primary',
        allowedFileExtensions: ["png", "jpg", "gif"],
        enctype: "multipart/form-data"
    });

    var a;
    $('#multipartFile').on('fileuploaded', function (event, data, previewId, index) {
        if (data.response.code == 11) {
            a = data.response.data
            console.log(a)
            $("#images1").val(a)//把图片路径赋值给表单中的一个input  表单然后通过name属性直接增加
        }
    });

    //--------------------------------------------------------------增加-----------------------------------------------------------------------

    //增加
    function InsertGoodsEdit() {
        //富文本框取值
        var content = editor.html();
        $("#ContentId").val(content)//富文本框中的内容无法通过name属性获取到 所以定义一个id  通过editor获取到内容后 赋值过去 在获取就拿到了  1.为什么还要赋值？因为是表单是一个整体 所以分开不好传参

        //获取三级类目赋值
        var one = $("#one").val();
        var two = $("#two").val();
        var three = $("#three").val();
        $("#One1").val(one)
        $("#Two1").val(two)
        $("#Three1").val(three)

        var insertgoods = $("#FromIds").serializeObject();
        console.log(insertgoods)//查看表单中的值

        $.ajax({
            url: goods + "/goods/InsertGoodsSPU",
            headers: {"Autherizetion": window.localStorage.getItem("token")},
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            type: "post",
            data: JSON.stringify(insertgoods),//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    alert("增加商品表成功")
                } else if (result.code == 12) {
                    top.window.location.href = "../shoplogin.html";//token失效，跳转回去登录页面重新登录
                }
            }
        })
    }
</script>


<!-------------------------------------------------------单选按钮显示与隐藏--------------------------------------------------------------->
<!--<ul class="set1">-->
<!--    <li><strong class="orange fontsize20">*</strong>请选择文章发布方式</li>-->
<!--    <li><span class="webnamesec sizese">-->
<!--          <input type="radio" name="identity" value="URL发布" onclick="radioClick()"/>URL发布-->
<!--                  <input type="radio" name="identity" value="编辑发布" onclick="radioClick()"/>编辑发布-->
<!--          </span></li>-->
<!--</ul>-->
<!--<ul class="set1" id="casea" style="display:none">-->
<!--    <li>外部URL</li>-->
<!--    <li><span class="webname">-->
<!--            <input name="url" type="text" id="url" value="$!obj.url" size="40"/>-->
<!--            </span><span id="nothis"><strong class="q"></strong><strong-->
<!--            class="w">填写URL后，该文章链接会直接跳转到对应的URL，URL以http://开头</strong><strong class="c"></strong></span></li>-->
<!--</ul>-->
<!--<ul class="set1" id="contentinpt" style="display:none">-->
<!--    <li><strong class="orange fontsize20"></strong>内容</li>-->
<!--    <li>-->
<!--         <span class="webname">-->
<!--         <textarea name="content" cols="40" id="content">$!obj.content</textarea>-->
<!--         </span>-->
<!--    </li>-->
<!--</ul>-->
<!--<script>-->
<!--    function radioClick() {-->
<!--        //定义一个变量show，show获取的是被选中的radio对应的值-->
<!--        var show = "";-->
<!--        //取到所有的单选-->
<!--        var apm = document.getElementsByName("identity");-->
<!--        //遍历-->
<!--        for (var i = 0; i < apm.length; i++) {-->
<!--            //取到所选中的值checked-->
<!--            if (apm[i].checked)-->
<!--                show = apm[i].value;-->
<!--        }-->
<!--        //接下来就是对取到的值，进行显示和隐藏操作。-->
<!--        switch (show) {-->
<!--            case 'URL发布':-->
<!--                document.getElementById("casea").style.display = "block";-->
<!--                document.getElementById("contentinpt").style.display = "none";-->
<!--                break;-->
<!--            case '编辑发布':-->
<!--                document.getElementById("casea").style.display = "none";-->
<!--                document.getElementById("contentinpt").style.display = "block";-->
<!--                break;-->
<!--            default:-->
<!--                document.getElementById("casea").style.display = "none";-->
<!--                document.getElementById("contentinpt").style.display = "none";-->
<!--                break;-->
<!--        }-->
<!--    }-->
<!--</script>-->
</html>